<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>flex布局</title>
    <link rel="stylesheet" href="css/layout.css">
</head>

<body>
    <!-- 注释 -->
    <div style="background:yellow;padding:5px">
        <h4 style="text-align:center">请调整浏览器窗口来查看响应效果。</h4>
    </div>

    <!-- Header -->
    <div class="header">
        <h1>我的网站</h1>
        <p>拥有 <b>弹性</b> 布局。</p>
    </div>

    <!-- 导航栏 -->
    <div class="navbar">
        <a href="#">Link</a>
        <a href="#">Link</a>
        <a href="#">Link</a>
        <a href="#">Link</a>
    </div>

    <!-- 弹性网格（内容） -->
    <div class="row">
        <div class="side">
            <h2>关于我</h2>
            <h5>我的照片：</h5>
            <div class="fakeimg" style="height:200px;">图像</div>
            <p>Some text about me in culpa qui officia deserunt mollit anim..</p>
            <h3>More Text</h3>
            <p>Lorem ipsum dolor sit ame.</p>
            <div class="fakeimg" style="height:60px;">图像</div><br>
            <div class="fakeimg" style="height:60px;">图像</div><br>
            <div class="fakeimg" style="height:60px;">图像</div>
        </div>
        <div class="main">
            <h2>标题</h2>
            <h5>标题描述，2021 年 1 月 1 日</h5>
            <div class="fakeimg" style="height:200px;">图像</div>
            <p>一些文本..</p>
            <p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod
                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
                ullamco.</p>
            <br>
            <h2>标题</h2>
            <h5>标题描述，2021 年 1 月 2 日</h5>
            <div class="fakeimg" style="height:200px;">图像</div>
            <p>一些文本..</p>
            <p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod
                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
                ullamco.</p>
        </div>
    </div>

    <!-- Footer -->
    <div class="footer">
        <h2>页脚</h2>
    </div>
</body>

</html>